﻿@model ReservationViewModel
@using Nop.Plugin.Misc.Reservations.Models;
@{
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";
}
@{ 
    string productname = @Model.SelectedProduct.Name;
    int productId = @Model.SelectedProduct.Id;
    int customerId = @Model.CurrentCustomer.Id;
    var qty = @Model.Quantity;
    var price = Math.Round((@Model.SelectedProduct.ProductVariants.First().Price * @Model.Quantity), 2);
    string infoClass = "";
    string pairMsg = "";
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="page home-page">
        <div class="page-title">
            <h1>Reservation - @productname</h1>
        </div>
        <div class="page-timer">
            <div id="countdowntimer">Your reservation selections will reset in <span class="timer">10:00</span> minutes...</div>
        </div>
        <div class="page-body">
            @if (Model.StatusMessage.Count != 0)
            {
                foreach (KeyValuePair<int, string> pair in Model.StatusMessage)
                {
                    StatusMessageType statusType = (StatusMessageType)pair.Key;
                    if (statusType == StatusMessageType.Warning)
                    {
                        infoClass = "msg-warning";
                        pairMsg = pair.Value;
                    }
                    if (statusType == StatusMessageType.Error)
                    {
                        infoClass = "msg-error";
                        pairMsg = pair.Value;
                    }
                    if (statusType == StatusMessageType.Other)
                    {
                        infoClass = "msg-confirm";
                        pairMsg = pair.Value;
                    }
                }
            }

            <div id="error-msg" class="@infoClass">
                <p>@pairMsg</p>
            </div>

            <div class="time-table">
                <script type="text/javascript">
    $(function () {
        // Initialize Datepicker
        $("#datepicker").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            minDate: '09/21/2013',
            beforeShowDay: function (date) {
                var day = date.getDay();
                if (day == 1) {
                    return { 0: false };
                } else {
                    return { 0: true };
                }
            },
            onSelect: function (selecteddate, inst) {
                //console.log(selecteddate);
                var msgdiv = $("#error-msg");
                msgdiv.hide();
                var group = "Group";
                var productname = "@productname";
                if (productname == "Individual Shooter") {
                    group = "Individual";
                }
                else {
                    group = "Group";
                }

                //Set to Available Status
                defaultAvailableStatus(group);

                //Update Reservation
                updateReservation(group, selecteddate);

                $('#dialog').dialog('close');
                $('#selectdate').attr('value', selecteddate);
            },
            buttonImage: '/Themes/HolyShop/Content/images/calendar.gif',
        }).datepicker("setDate", new Date());

        $("#product-value").val("@productname");
        $(".qtyFeatured").spinner({ min: 0, max: 100 });
        $('.qtyFeatured').on("spinstop", function () {
            var index = $(this).attr("id").split("_");
            var subTotal = (isNaN($(this).attr("data-price")) ? 0 : $(this).attr("data-price")) * $(this).val();
            $("#txtAddOnSubTotal_" + index[1]).val(numeral(subTotal).format("(0,0.00)"));
        });

        $("#product-value").change(function () {
            var date = $('#datepicker').datepicker({ dateFormat: 'mm/dd/yy' }).val();
            var value = $(this).val();

            if (value == "Individual Shooter") {
                var url = "/Reservation/ReservationDaily?selectedDate=" + date + "&productId=58&quantity=1";
                //var url = "/Reservation/ReservationDaily?selectedDate=" + date + "&productId=1&quantity=1";
                window.location.href = url;
            }
            else {
                var url = "/Reservation/ReservationDaily?selectedDate=" + date + "&productId=59&quantity=1";
                //var url = "/Reservation/ReservationDaily?selectedDate=" + date + "&productId=2&quantity=1";
                window.location.href = url;
            }
        });

        $("#countdowntimer").createCountdownTimer(".timer", 600, 1, function () {
            window.location.reload();
        });

        $('#btnAddToCart').on('click', routeAddToCart);
        $('#btnContinue').on('click', routeOnePageCheckout);
    });

         //Modal Window for Calendar
         $(function () {
                        $("#dialog").dialog({
                            bgiframe: true,
                            autoOpen: false,
                            width: 450,
                            modal: true,
                            //jqModal: true,
                            //modal: false,
                            //buttons: {
                            //    'Close': function () {
                            //        $(this).dialog('close');
                            //    }
                            //},
                            // Added the close button to hide datepicker on dialog close
                            close: function () {
                                var selecteddate = $.datepicker.formatDate('mm/dd/yy', $("#datepicker").datepicker('getDate'));
                                $('#selectdate').attr('value', selecteddate);
                            }
                        });

                        $('#dialoglink').click(function () {
                            //$('#dialog').dialog('open');
                        });

                        $('#dialog').dialog('open');
                    });

    (function ($) {
        $.fn.createCountdownTimer = function (selector, time, tick, cb) {
            var seconds = time;
            var el = this;
            tick = tick || 1;
            var timer = function () {
                seconds -= tick;
                var mins = Math.floor(seconds / 60);
                var secs = seconds - mins * 60;
                var minsecs = numeral(mins).format("(00)") + ":" + numeral(secs).format("(00)");
               
                el.find(selector).text(String(minsecs));
                if (seconds > 0)
                    setTimeout(timer, tick * 1000);
                else
                    cb && cb();
            };
            setTimeout(timer, tick * 1000);
            return this;
        };
    })(jQuery);

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    function buttonreserved(obj) {
        var parseName = obj.id.split("_");
        var btnName = parseName[0];
        var productId = "@Model.SelectedProduct.Id";
        var time = $(obj).attr("data-time");
        var group = $(obj).attr("data-group");
        var cssclass = $(obj).attr("class");
        var pickDate = $.datepicker.formatDate('yy-mm-dd', $("#datepicker").datepicker('getDate'));
        var selectedDate = pickDate + " " + time
        var isCancel = false;
        var msgdiv = $("#error-msg");

        var tableIndex = 1;
        if (group == "Individual") {
            tableIndex = parseName[1];
        }
        
        msgdiv.hide();

        // Validate Button Click First
        if (cssclass == "selected-other") {
            var msg = "<p>This reservation is selected by other user. Changes is not allowed.</p>";
            msgBox("msg-error", msg);
            msgdiv.show();
        }
        else if (cssclass == "reserve-other") {
            var msg = "<p>This reservation is already reserved by other user. Cancellation is not allowed.</p>";
            msgBox("msg-error", msg);
            msgdiv.show();
        }
        else if (cssclass == "reserve-owner") {
            var msg = "<p>This reservation is already reserved by you. Cancellation is not allowed.</p>";
            msgBox("msg-error", msg);
            msgdiv.show();
        }
        else if (cssclass == "selected-owner") {
            isCancel = true;
            msgdiv.hide();
            $(obj).attr("class", "reserve-available");
            var post = postReservation(group, selectedDate, productId, tableIndex, isCancel);
        }
        else {
            msgdiv.hide();
            var post = postReservation(group, selectedDate, productId, tableIndex, isCancel);
        }
    };

    function msgBox(cssclass, msg) {
        $("#error-msg").attr('class', cssclass);
        $("#error-msg").empty();
        $("#error-msg").append(msg);
    }

    function defaultAvailableStatus(group) {
        if (group == "Individual") {
            $("#btnIndv9_1").attr('class', "reserve-available");
            $("#btnIndv9_2").attr('class', "reserve-available");
            $("#btnIndv9_3").attr('class', "reserve-available");
            $("#btnIndv9_4").attr('class', "reserve-available");
            $("#btnIndv10_1").attr('class', "reserve-available");
            $("#btnIndv10_2").attr('class', "reserve-available");
            $("#btnIndv10_3").attr('class', "reserve-available");
            $("#btnIndv10_4").attr('class', "reserve-available");
            $("#btnIndv11_1").attr('class', "reserve-available");
            $("#btnIndv11_2").attr('class', "reserve-available");
            $("#btnIndv11_3").attr('class', "reserve-available");
            $("#btnIndv11_4").attr('class', "reserve-available");
            $("#btnIndv12_1").attr('class', "reserve-available");
            $("#btnIndv12_2").attr('class', "reserve-available");
            $("#btnIndv12_3").attr('class', "reserve-available");
            $("#btnIndv12_4").attr('class', "reserve-available");
            $("#btnIndv13_1").attr('class', "reserve-available");
            $("#btnIndv13_2").attr('class', "reserve-available");
            $("#btnIndv13_3").attr('class', "reserve-available");
            $("#btnIndv13_4").attr('class', "reserve-available");
            $("#btnIndv14_1").attr('class', "reserve-available");
            $("#btnIndv14_2").attr('class', "reserve-available");
            $("#btnIndv14_3").attr('class', "reserve-available");
            $("#btnIndv14_4").attr('class', "reserve-available");
            $("#btnIndv15_1").attr('class', "reserve-available");
            $("#btnIndv15_2").attr('class', "reserve-available");
            $("#btnIndv15_3").attr('class', "reserve-available");
            $("#btnIndv15_4").attr('class', "reserve-available");
            $("#btnIndv16_1").attr('class', "reserve-available");
            $("#btnIndv16_2").attr('class', "reserve-available");
            $("#btnIndv16_3").attr('class', "reserve-available");
            $("#btnIndv16_4").attr('class', "reserve-available");
            $("#btnIndv17_1").attr('class', "reserve-available");
            $("#btnIndv17_2").attr('class', "reserve-available");
            $("#btnIndv17_3").attr('class', "reserve-available");
            $("#btnIndv17_4").attr('class', "reserve-available");
            $("#btnIndv18_1").attr('class', "reserve-available");
            $("#btnIndv18_2").attr('class', "reserve-available");
            $("#btnIndv18_3").attr('class', "reserve-available");
            $("#btnIndv18_4").attr('class', "reserve-available");
        }
        else {
            $("#btnGrp9").attr('class', "reserve-available");
            $("#btnGrp10").attr('class', "reserve-available");
            $("#btnGrp11").attr('class', "reserve-available");
            $("#btnGrp12").attr('class', "reserve-available");
            $("#btnGrp13").attr('class', "reserve-available");
            $("#btnGrp14").attr('class', "reserve-available");
            $("#btnGrp15").attr('class', "reserve-available");
            $("#btnGrp16").attr('class', "reserve-available");
            $("#btnGrp17").attr('class', "reserve-available");
            $("#btnGrp18").attr('class', "reserve-available");
        }
    }

    function postReservation(group, selectedDate, productId, tableIndex, isCancel) {
        ////Build Parameter Here
        var selected = { "selectedDate": selectedDate, "productId": productId, "tableIndex": tableIndex, "isCancelled": isCancel };
        var cid = "@customerId";

        //Ajax call to submit selected reservation
        $.ajax({
            type: "POST",
            url: "/Reservation/SelectedSlot",
            data: selected,
            //contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var result = $.parseJSON(data.BookedReservations);
                console.log(result);
                var plot = plotReservation(result, group, cid);
                if (isCancel == true) {
                    var msg = "<p>Successfully cancelled reservation.</p>";
                    msgBox("msg-confirm", msg);
                    $("#error-msg").show();
                }
                else {
                    var msg = "<p>Successfully posted reservation.</p>";
                    msgBox("msg-confirm", msg);
                    $("#error-msg").show();
                }
            },
            failure: function (errMsg) {

            },
        });
    }

    function updateReservation(group, selectedDate) {
        ////Build Parameter Here
        var selected = { "selectedDate": selectedDate };
        var cid = "@customerId";

        //Set to Available Status
        defaultAvailableStatus(group);

        //Ajax call to submit selected reservation
        $.ajax({
            type: "POST",
            url: "/Reservation/BookedReservations",
            data: selected,
            //contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var result = $.parseJSON(data.BookedReservations);
                //console.log(result);
                var plot = plotReservation(result, group, cid);
            },
            failure: function (errMsg) {

            },
        });
    }

    function routeAddToCart() {
        var addOn = {};
        $.each($('#featuredDiv input[name^="qtyFeatured_"]'), function () {
            var pid = $(this).attr('id').replace(/qtyFeatured_/, '');
            var val = $(this).val();
            addOn['' + pid] = val;
        }).promise().done(function () {
            $.ajax({
                type: "POST",
                url: "/Reservation/AddToCart",
                data: { "additionalItems": JSON.stringify(addOn) },
                dataType: "json",
                success: function (data) {
                    var result = JSON.parse(data.Status);
                    if (result) {
                        location = '@Url.Action("Cart", "ShoppingCart")';
                    }
                    else {
                        var msgDiv = $('#error-msg');
                        var messages = JSON.parse(data.Message);
                        $.each(messages, function (statusType, message) {
                            var msg = '<p>' + message + '</p>';
                            msgBox('msg-error', msg);
                            msgDiv.show();
                        });
                    }
                },
                failure: function (msg) { },
            });
        });
    }

                    function routeOnePageCheckout()
                    {
                        location = '@Url.Action("OnePageCheckout", "Checkout")';
                    }

     function plotReservation(result, group, cid) {
        var selectedqty = 0;
        var productprice = "@price";

        //Set to Available Status
        defaultAvailableStatus(group);

        for (var i = 0; i < result.length; i++) {
            var reservedate = result[i].ReserveDate;
            var cdate = new Date(reservedate);
            var chour = cdate.getHours();
            var duration = result[i].Duration;
            var customerId = result[i].CustomerID;
            var tableIndex = result[i].TableIndex;
            var status = result[i].Status; //Available = 1, Reserved = 2, OnHold = 3

            //Reserved by User
            if (status == 2 && customerId == cid) {
                if (group == "Individual") {
                    var btnName = "#btnIndv" + chour + "_" + tableIndex;
                    var cssclass = getBackgroundColorClass(2, true);
                    $(btnName).attr('class', cssclass);
                }
                else {
                    var btnName = "#btnGrp" + chour;
                    var cssclass = getBackgroundColorClass(2, true);
                    $(btnName).attr('class', cssclass);
                }
            }
                //Reserve by Other
            else if (status == 2 && !(customerId == cid)) {
                if (group == "Individual") {
                    var btnName = "#btnIndv" + chour + "_" + tableIndex;
                    var cssclass = getBackgroundColorClass(2, false);
                    $(btnName).attr('class', cssclass);
                }
                else {
                    var btnName = "#btnGrp" + chour;
                    var cssclass = getBackgroundColorClass(2, false);
                    $(btnName).attr('class', cssclass);
                }
            }
                //Selected by User
            else if (status == 3 && customerId == cid) {
                selectedqty = selectedqty + 1;

                //var totals = selectedqty * productprice;
                var totals = (isNaN(productprice) ? 0 : productprice * selectedqty);
                $('#totaltxt').attr('value', numeral(totals).format("(0,0.00)"));
                $('#qty').attr('value', selectedqty);

                if (group == "Individual") {
                    var btnName = "#btnIndv" + chour + "_" + tableIndex;
                    var cssclass = getBackgroundColorClass(3, true);
                    $(btnName).attr('class', cssclass);
                }
                else {
                    var btnName = "#btnGrp" + chour;
                    var cssclass = getBackgroundColorClass(3, true);
                    $(btnName).attr('class', cssclass);
                }
            }
                //Selected by Other
            else if (status == 3 && !(customerId == cid)) {
                if (group == "Individual") {
                    var btnName = "#btnIndv" + chour + "_" + tableIndex;
                    var cssclass = getBackgroundColorClass(3, false);
                    $(btnName).attr('class', cssclass);
                }
                else {
                    var btnName = "#btnGrp" + chour;
                    var cssclass = getBackgroundColorClass(3, false);
                    $(btnName).attr('class', cssclass);
                }
            }
        }
    }

    function getBackgroundColorClass(status, isuser) {
        //Reserved by Login User
        if (status == 2 && isuser == true) {
            return "reserve-owner"
        }
            //Reserved by Other User
        else if (status == 2 && isuser == false) {
            return "reserve-other"
        }
            //Selected by Login User
        else if (status == 3 && isuser == true) {
            return "selected-owner"
        }
            //Selected by Other User
        else if (status == 3 && isuser == false) {
            return "selected-other"
        }
            //Available
        else {
            return "reserve-available"
        }
    };
                </script>
                @*<script type="text/javascript"> alert(1);</script>*@
                <div id="dialog" title="Select Date to Reserve" style="display:none;">
                    <form id="mainform">
                        <div class="centerscreen"><div id="datepicker"></div></div>
                    </form>
                </div>

                <table style="width: 100%;">
                    <tbody>
                        <tr>
                            <td style="width: 5%;"><strong>Date</strong></td>
                            <td style="width: 12%;">
                                <span>
                                    <input id="selectdate" style="width: 80px;" readonly="readonly" type="text" />
                                    <a href="" id="dialoglink"><img id="calimg" src="/Themes/HolyShop/Content/images/calendar.gif"></a>
                                </span>
                            </td>
                            <td style="width: 12%; padding-left: 15px;"><strong>Range Package</strong></td>
                            <td style="width: 15%;">
                                @*<textarea id="product-value" style="resize: none; width: 195px; height: 18px;" readonly>@productname</textarea>*@
                                <select id="product-value" style="width: 200px;">
                                    <option value="Individual Shooter">Individual Shooter</option>
                                    <option value="Private Experience">Private Experience</option>
                                </select>                            
                            </td>
                            <td style="width: 5%;">
                                <label for="qty"><strong>Qty</strong></label>
                            <td style="width: 5%;">
                                <input id="qty" name="value" style="width: 30px; height: 14px; font-size: 10px;" value=@qty readonly /></td>
                            <td style="width: 5%;"><strong>Total&nbsp;&nbsp;$</strong></td>
                            <td style="width: 8%;">
                                <input id="totaltxt" style="text-align: right;" value=@price readonly="readonly" type="text" /></td>
                            <td style="width: 5%;">
                                <input id="btnAddToCart" class="button-1 cart-button" value="Add To Cart" type="button" /></td>
                            <td style="width: 5%;">
                                <input id="btnContinue" class="button-1 cart-button" value="Checkout" type="button" /></td>
                        </tr>
                    </tbody>
                </table>
                <br>
                @*<script type="text/javascript"> alert(2);</script>*@
                @if (@Model.SelectedProduct.Name == "Individual Shooter")
                {
                    @*<script type="text/javascript"> alert(3);</script>*@    
                    <table style="width: 100%;">
                        <tbody>
                            <tr >
                                <td style="width: 20%; text-align: center; font-size:medium;"><strong>Start Time</strong></td>
                                <td style="width: 20%; text-align: center; font-size: medium;"><strong>Slot 1</strong></td>
                                <td style="width: 20%; text-align: center; font-size: medium;"><strong>Slot 2</strong></td>
                                <td style="width: 20%; text-align: center; font-size: medium;"><strong>Slot 3</strong></td>
                                <td style="width: 20%; text-align: center; font-size: medium;"><strong>Slot 4</strong></td>
                            </tr>
                            <tr id="">
                                <td style="text-align: center;">09:00 AM</td>
                                <td style="width: 20%;">
                                    <input id="btnIndv9_1" name="09H1" style="width: 100%;" data-group="Individual" data-time='9:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td style="width: 20%;">
                                    <input id="btnIndv9_2" name="09H2" style="width: 100%;" data-group="Individual" data-time='9:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td style="width: 20%;">
                                    <input id="btnIndv9_3" name="09H3" style="width: 100%;" data-group="Individual" data-time='9:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td style="width: 20%;">
                                    <input id="btnIndv9_4" name="09H4" style="width: 100%;" data-group="Individual" data-time='9:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">10:00AM</td>
                                <td>
                                    <input id="btnIndv10_1" style="width: 100%;" data-group="Individual" data-time='10:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv10_2" style="width: 100%;" data-group="Individual" data-time='10:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv10_3" style="width: 100%;" data-group="Individual" data-time='10:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv10_4" style="width: 100%;" data-group="Individual" data-time='10:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">11:00AM</td>
                                <td>
                                    <input id="btnIndv11_1" style="width: 100%;" data-group="Individual" data-time='11:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv11_2" style="width: 100%;" data-group="Individual" data-time='11:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv11_3" style="width: 100%;" data-group="Individual" data-time='11:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv11_4" style="width: 100%;" data-group="Individual" data-time='11:00:00 AM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">12:00PM</td>
                                <td>
                                    <input id="btnIndv12_1" style="width: 100%;" data-group="Individual" data-time='12:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv12_2" style="width: 100%;" data-group="Individual" data-time='12:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv12_3" style="width: 100%;" data-group="Individual" data-time='12:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv12_4" style="width: 100%;" data-group="Individual" data-time='12:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">01:00PM</td>
                                <td>
                                    <input id="btnIndv13_1" style="width: 100%;" data-group="Individual" data-time='1:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv13_2" style="width: 100%;" data-group="Individual" data-time='1:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv13_3" style="width: 100%;" data-group="Individual" data-time='1:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv13_4" style="width: 100%;" data-group="Individual" data-time='1:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">02:00PM</td>
                                <td>
                                    <input id="btnIndv14_1" style="width: 100%;" data-group="Individual" data-time='2:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv14_2" style="width: 100%;" data-group="Individual" data-time='2:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv14_3" style="width: 100%;" data-group="Individual" data-time='2:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv14_4" style="width: 100%;" data-group="Individual" data-time='2:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">03:00PM</td>
                                <td>
                                    <input id="btnIndv15_1" style="width: 100%;" data-group="Individual" data-time='3:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv15_2" style="width: 100%;" data-group="Individual" data-time='3:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv15_3" style="width: 100%;" data-group="Individual" data-time='3:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv15_4" style="width: 100%;" data-group="Individual" data-time='3:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">04:00PM</td>
                                <td>
                                    <input id="btnIndv16_1" style="width: 100%;" data-group="Individual" data-time='4:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv16_2" style="width: 100%;" data-group="Individual" data-time='4:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv16_3" style="width: 100%;" data-group="Individual" data-time='4:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv16_4" style="width: 100%;" data-group="Individual" data-time='4:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">05:00PM</td>
                                <td>
                                    <input id="btnIndv17_1" style="width: 100%;" data-group="Individual" data-time='5:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv17_2" style="width: 100%;" data-group="Individual" data-time='5:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv17_3" style="width: 100%;" data-group="Individual" data-time='5:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv17_4" style="width: 100%;" data-group="Individual" data-time='5:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">06:00PM</td>
                                <td>
                                    <input id="btnIndv18_1" style="width: 100%;" data-group="Individual" data-time='6:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv18_2" style="width: 100%;" data-group="Individual" data-time='6:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv18_3" style="width: 100%;" data-group="Individual" data-time='6:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                                <td>
                                    <input id="btnIndv18_4" style="width: 100%;" data-group="Individual" data-time='6:00:00 PM' value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>    
                }
                else
                {
                    @*<script type="text/javascript"> alert(4);</script>*@    
                    <table style="width: 100%;">
                        <tbody>
                            <tr>
                                <td style="width: 20%; text-align: center; font-size: medium;"><strong>Start Time</strong></td>
                                <td style="width: 80%; text-align: center; font-size: medium;"><strong>Slot</strong></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">09:00AM</td>
                                <td>
                                    <input id="btnGrp9" style="width: 100%;" data-group="Group" data-time="9:00:00 AM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">10:00AM</td>
                                <td>
                                    <input id="btnGrp10" style="width: 100%;" data-group="Group" data-time="10:00:00 AM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">11:00AM</td>
                                <td>
                                    <input id="btnGrp11" style="width: 100%;" data-group="Group" data-time="11:00:00 AM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">12:00PM</td>
                                <td>
                                    <input id="btnGrp12" style="width: 100%;" data-group="Group" data-time="12:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">01:00PM</td>
                                <td>
                                    <input id="btnGrp13" style="width: 100%;" data-group="Group" data-time="1:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">02:00PM</td>
                                <td>
                                    <input id="btnGrp14" style="width: 100%;" data-group="Group" data-time="2:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">03:00PM</td>
                                <td>
                                    <input id="btnGrp15" style="width: 100%;" data-group="Group" data-time="3:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">04:00PM</td>
                                <td>
                                    <input id="btnGrp16" style="width: 100%;" data-group="Group" data-time="4:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">05:00PM</td>
                                <td>
                                    <input id="btnGrp17" style="width: 100%;" data-group="Group" data-time="5:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td style="text-align: center;">06:00PM</td>
                                <td>
                                    <input id="btnGrp18" style="width: 100%;" data-group="Group" data-time="6:00:00 PM" value=@price class="reserve-available" onclick="buttonreserved(this)" type="button" /></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                }
                @*<script type="text/javascript"> alert(5);</script>*@
                <div class="legendAddon">
                    <div class="legendDiv">
                        <table>
                            <tr>
                                <td style="text-align: left;"><strong>Legend:</strong></td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="btn1" style="width: 100%; text-align: center; font-size: 8px;" value="Available" class="reserve-available" type="button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="btn2" style="width: 100%; text-align: center; font-size: 8px;" value="Reservation Pending – Other Party" class="selected-other" type="button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="btn3" style="width: 100%; text-align: center; font-size: 8px;" value="Reservation Pending – You" class="selected-owner" type="button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="btn4" style="width: 100%; text-align: center; font-size: 8px;" value="Reserved – Other Party" class="reserve-other" type="button" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input id="btn5" style="width: 100%; text-align: center; font-size: 8px;" value="Your Confirmed Reservation" class=" reserve-owner" type="button" />
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="featuredDiv">
                        <table style="width: 80%;" id="featuredTable">
                            <tbody>
                                @foreach (var product in @Model.FeaturedAdditionalProducts)
                                {<tr>
                                       @*<td style="width: 20%;"></td>*@
                                       <td style="width: 30%;">@product.Name</td>
                                       <td style="width: 20%;">Qty&nbsp;&nbsp;<input id="qtyFeatured_@product.Id" name="qtyFeatured_@product.Id" class="qtyFeatured" style="width: 30px; height: 14px; font-size: 10px;" value="0" readonly="readonly" type="text" data-price="@product.ProductVariants.First().Price.ToString("###0.00")" /></td>
                                       <td style="width: 20%;">SubTotal&nbsp;&nbsp;$&nbsp;&nbsp;<input id="txtAddOnSubTotal_@product.Id" value="0.00" style="width: 90px; text-align: right;" readonly="readonly" type="text" /></td>
                                 </tr>}
                            </tbody>
                        </table>
                     </div>
                </div>
            </div>
        </div>
    </div>
}